<template>
    <div>
        <TrainPage
            ref="TrainPageRef"
            :searchConfig="searchConfig"
            :tableConfig="tableConfig"
            sendUrl="get_first_stages"
            customize
        >
        </TrainPage>
        <DialogForm
            v-model="visable"
            v-if="visable"
            :grid="-1"
            :formConfig="formConfig"
            :rules="rules"
            :formData="formData"
            :beforeSubmit="beforeSubmit"
            apiKey="post_first_stage"
        >
            <template slot="component_html">
                <mavonEditor
                    upload_file_url="bn"
                    class="h-vh-60"
                    v-model="formData.component_str"
                    @change="editorChange"
                ></mavonEditor>
            </template>
        </DialogForm>
    </div>
</template>

<script>
export default {
    name: 'admin_first_stage',
    components: {
    
        mavonEditor: () => import('@/components/mavonEditor/index.vue'),
    },
    data() {
        return {
            searchConfig: [
                {
                    label: '组件名称',
                    type: 'input',
                    modelName: 'keywords',
                },
            ],
            tableConfig: {
                isSelection: false,
                maxHeightFlag: false,
                stripe: true,
                filterData: (data) => {
                    return data.map((item) => {
                        let { update_time, create_time,component_type,component_render_type } = item
                        return {
                            ...item,
                            _create_time: this.klDateFormat(create_time),
                            _update_time: this.klDateFormat(update_time),
                            _component_type:this.bn_first_stage_options.find((item)=>item.value==component_type)?.label,
                            _component_render_type:this.bn_first_stage_renders_options.find((item)=>item.value==component_render_type)?.label
                        }
                    })
                },
                btns: {
                    children: [
                        {
                            label: '新增',
                            type: 'primary',
                            clickFn: () => {
                                this.visable = true
                            },
                        },
                    ],
                },
                columnObj: [
                    {
                        label: '组件名称',
                        props: 'component_name',
                        width: 200,
                        clickFn: (row) => {
                                    this.visable = true
                                    this.formData = this.deepCopy(row)
                                },
                    },
                    {
                        label: '组件code',
                        props: 'component_code',
                        width: 200,
                    },
                    {
                        label: '组件类型',
                        props: '_component_type',
                        width: 200,
                    },
                    {
                        label: '渲染倍数',
                        props: '_component_render_type',
                        width: 200,  
                    },
                    {
                        label: '组件说明',
                        props: 'component_html',
                        html: true,
                    },
                    {
                        label: '创建时间',
                        width: 200,
                        props: '_create_time',
                    },
                    {
                        label: '更新时间',
                        width: 200,
                        props: '_update_time',
                    },

                    {
                        label: '操作',
                        slot: 'projectDetail',

                        props: 'action',
                        lock: true,
                        fixed: 'right',
                        children: [
                            {
                                label: '编辑',
                                type: 'success',
                                clickFn: (row) => {
                                    this.visable = true
                                    this.formData = this.deepCopy(row)
                                },
                            },
                            {
                                label: '删除',
                                type: 'danger',
                                clickFn: ({ _id } = {}) => {
                                    this.$confirm(
                                        '确认删除该组件吗，这将会导致原来引用这个组件的模板对应组件失效，建议不要删除！！！',
                                    )
                                        .then(async () => {
                                            const res = await this.$apis.del_first_stage({ _id })
                                            this.$message.success(res.msg)
                                            this.initTable()
                                        })
                                        .catch((err) => {
                                            this.Toast(err)
                                        })
                                },
                            },
                        ],
                    },
                ],
            },

            visable: false,
            rules: {
                component_code: [
                    { required: true, message: '请输入component_code', trigger: 'blur' },
                ],
                component_name: [
                    { required: true, message: '请选择component_name', trigger: 'blur' },
                ],
                component_type: [
                    { required: true, message: '请选择component_type', trigger: 'blur' },
                ],
                component_render_type: [
                    { required: true, message: '请选择component_render_type', trigger: 'blur' },
                ],
            },
            formConfig: [
                {
                    label: '组件code',
                    type: 'input',
                    modelName: 'component_code',
                    className: 'w-300',
                    value: '',
                },
                {
                    label: '组件名字',
                    type: 'input',
                    modelName: 'component_name',
                    className: 'w-300',
                    value: '',
                },
                {
                    label: '组件类型',
                    type: 'select',
                    modelName: 'component_type',
                    className: 'w-300',
                    options: ()=>{
                        return this.bn_first_stage_options
                    },
                },
                {
                    label: '渲染倍数',
                    type: 'select',
                    modelName: 'component_render_type',
                    className: 'w-300',
                    options: ()=>{
                        return this.bn_first_stage_renders_options
                    },
                },
                {
                    label: '组件信息',
                    type: 'customInput',
                    modelName: 'component_code',
                    slot: 'component_html',
                    grid:-1
                },
            ],
            formData: {
                _id: '',
                component_code: '',
                component_name: '',
                component_type: '',
                component_html: '',
                component_str: '',
            },
        }
    },
    computed: {
        ...Vuex.mapState(['userdata', 'options']),
        bn_first_stage_options() {
            return this.options?.bn_first_stage_options || []
        },
        bn_first_stage_renders_options() {
            return this.options?.bn_first_stage_renders_options || []
        },
    },
    methods: {
        editorChange({ str, html }) {
            Object.assign(this.formData, {
                component_str: str,
                component_html: html,
            })
        },
    },
}
</script>
